// 1.引入路由方法
import {createRouter,createWebHashHistory} from 'vue-router'
import {
  CartOutline,
  GiftOutline,
  AppsOutline,
  CopyOutline,
  SettingsOutline,
  ContractOutline,
  PieChartOutline,
  PencilOutline,
} from "@vicons/ionicons5";

// 2.引入页面组件
import shop from '../views/shop.vue'
import Product from '../views/Product/index.vue'
import Login from '../views/Login/index.vue'
import Mainlayout from '../layout/index.vue'
import Page01 from '../views/ParamTest/Page01.vue'
import Page02 from '../views/ParamTest/Page02.vue'
import Page03 from '../views/ParamTest/Page03.vue'
import ParamTest from '../views/ParamTest/index.vue'
import Notfound from '../views/Notfound.vue';
import request from '../utils/request.js'
import PiniaTest from '../views/PiniaTest/index.vue'
import CompA from '../views/PiniaTest/CompA.vue';
import CompB from '../views/PiniaTest/CompB.vue';
import { useAccount } from '../store/account.js';
import { renderIcon } from '../utils/tools.js';
import ProductEdit from '../views/Product/Edit.vue';
import Setting from '../views/Setting.vue';
import Manager from '../views/Manager/index.vue';
import Role from '../views/Manager/Role.vue';
import UserList from '../views/Manager/UserList.vue';
import Nopermission from '../views/Nopermission.vue';
import DashBoard from '../views/DashBoard/index.vue';
import RichText from '../views/RichText.vue';



// 3.设置路由-组件的映射关系
export const routes = [ // 第一层
  {
    path:'/',
    component:Mainlayout,
    children:[ // 第二层
      {
        path:'/dashboard',
        component:DashBoard,
        label:'数据可视化',
        icon:renderIcon(PieChartOutline)
      },
      {
        path:'/rich/text',
        component:RichText,
        label:'富文本编辑器',
        icon:renderIcon(PencilOutline)
      },
      {
        path:'/shop',
        component:shop,
        label:'购物车管理',
        icon:renderIcon(CartOutline)
      },
      {
        path:'/product',
        component:Product,
        label:'商品管理',
        icon:renderIcon(GiftOutline)
      },
      {
        path:'/product/edit',
        component:ProductEdit,
        label:'商品编辑',
        icon:renderIcon(GiftOutline),
        show:false, // 控制侧边栏是否显示
      },
      {
        path:'/page',
        component:ParamTest,
        label:'动态路由测试',
        icon:renderIcon(AppsOutline),
        children:[// 第三层
          {path:'/page/:id',component:Page01,label:'动态路由测试'},
          {path:'/page/:num',component:Page02,label:'动态路由测试'},
          {path:'/page/3',component:Page03,label:'动态路由测试'}
        ]
      },
      {
        path:'/pinia',
        component:PiniaTest,
        label:'状态机',
        icon:renderIcon(CopyOutline),
        children:[// 第三层
          {path:'/pinia/a',component:CompA,label:'A组件'},
          {path:'/pinia/b',component:CompB,label:'B组件'},
        ]
      },
      {
        path:'/setting',
        label:'个人设置',
        icon:renderIcon(SettingsOutline),
        component:Setting,
        show:false, // 控制侧边栏是否显示
      },
      {
        path:'/manager',
        component:Manager,
        label:'权限管理',
        icon:renderIcon(ContractOutline),
        children:[// 第三层
          {path:'/manager/role',component:Role,label:'角色管理'},
          {path:'/manager/user',component:UserList,label:'账号管理'},
        ]
      },
      {
        path:'/nopermission',
        label:'无权限访问',
        icon:renderIcon(SettingsOutline),
        component:Nopermission,
        show:false, // 控制侧边栏是否显示
      },
    ],
  },
  {path:'/login',component:Login,label:'登录'},
  {path:'/:pathMatch(.*)*',component:Notfound},
]

// 4. 生成路由对象
const router = createRouter({
  'history':createWebHashHistory(),  //路由模式
  'routes':routes
})

// 全局前置守卫
router.beforeEach((to,from,next)=>{
  // to 将要访问的路径
  // from 从哪个路径跳转而来
  // 路由白名单
  const whiteList = ['/login','/Nopermission','/']
  if(whiteList.includes(to.path)){
    return next()
  }
  // 登录状态判断
  const account = useAccount()
  if(account.jwttoken){
    // 访问权限控制 to.path是否存在permission中
    let isPermit = account.permitData.permission.includes(to.path)
    isPermit ? next() : next('/Nopermission')
  }else{
   next('/login') 
  }
})

// 5. 导出路由对象
export default router